<div class = "editor-container" style = "overflow: hidden;">
    <div class = "editor-header clearfix">
        <div class = "editor-header-back fl w50 h60 cp" ng-click = "toPages()">
            <i class = "copy icon"></i>
        </div>
        <div class = "editor-header-funs fl">
            <div class = "editor-header-funs-title f20 ml10" style = "font-family: 黑体;">
                {{pageName}}
                <i class = "edit icon" style = "font-size: 14px;" ng-click = "editTitle()" ng-show = "userName === sharerName || sharerName == 'userself'"></i>
                <i ng-class = "{empty:!focused,star:true,icon:true}" style = "font-size: 14px;color: #fb2828;" title = "点击重点关注" ng-click = "focusAttention()"></i>
            </div>
            <div class = "editor-header-funs-menus ml10" style = "font-size: 13px;">
                <menu-item json = "menu" ng-repeat = "menu in menus"></menu-item>
            </div>
        </div>
        <div class = "fr mt10 mr50">
            <button class = "ui red button mr20 fr" ng-click = "sharePage($event)">
                <span>分享</span>
            </button>
            <button class = "ui red button fr mr20" ng-click = "exitFullScr($event)" ng-show = "previewing && userName === sharerName">
                <span>编辑</span>
            </button>
            <button class = "ui red button fr mr20" ng-click = "savePage()" ng-show = "userName === sharerName || sharerName == 'userself'">
                <span>保存</span>
            </button>
        </div>
    </div>
    <div class = "editor-shortcut pt5 pb5" ng-hide = "previewing">
        <div class = "editor-shortcut-wrap cl ml60 clearfix">
            <b class = "fl ml10" ng-click = "savePage()">
                <i class = "save icon"></i>
            </b>
            <b class = "fl ml10">
                <i class = "font icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('fontWeight','bold')">
                <i class = "bold icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('fontStyle','italic')">
                <i class = "italic icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('textDecoration','underline')">
                <i class = "underline icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('textAlign','left')">
                <i class = "align left icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('textAlign','center')">
                <i class = "align justify icon"></i>
            </b>
            <b class = "fl ml10" ng-click = "changeFontStyle('textAlign','right')">
                <i class = "align right icon"></i>
            </b>
            <b class = "fl ml10 cp" ng-click = "preview()">
                <i class = "laptop icon"></i>
                <span>预览</span>
            </b>
        </div>
    </div>
    <div class = "clearfix">
        <!--表字段-->
        <div style = "float: left;width:13%;border-right: 1px solid #ddd;" ng-hide = "previewing">
            <field-list></field-list>
        </div>
        <!--编辑器-->
        <div class = "pr fl" ng-class = "{pr:true,fl:previewing ? false:true}" ng-style = "{'width':previewing ? '100%' : '74%'}">
            <div class = "p10" id = "pdf-container">
                <field-manager ng-hide = "previewing"></field-manager>
                <chart-manager></chart-manager>
                <div id = "render_me" style = "display: none;"></div>
            </div>
        </div>
        <!--图表选择-->
        <div style = "float: left;width:13%;min-height: 680px;border-left: 1px solid #ddd;" ng-hide = "previewing" class = "availableChartsContainer">
            <div class="overflowscroll">
                <div class = "mt10 clearfix">
                    <section class = "clearfix">
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('pie')" ng-mouseover = "getChartInfo('允许多个维度,一个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/pie.png" class = "w30" alt = "">
                            <br>
                            <span>饼图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('circularPie')" ng-mouseover = "getChartInfo('允许多个维度,一个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/holePie.png" class = "w30" alt = "">
                            <br>
                            <span>环形饼图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('nestedPie')" ng-mouseover = "getChartInfo('允许多个维度,一个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/nestedPie.png" class = "w30" alt = "">
                            <br>
                            <span>嵌套饼图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('line')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/line.png" class = "w30" alt = "">
                            <br>
                            <span>折线图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('bar')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "info = ''">
                            <img src = "/trend-new-BI/assets/img/charts/bar.png" class = "w30" alt = "">
                            <br>
                            <span>柱状图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('verBar')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/verBar.png" class = "w30" alt = "">
                            <br>
                            <span>条形图</span>
                        </b>
                        <!--<b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('waterfall')" ng-mouseover = "getChartInfo('允许一个维度,一个度量')" ng-mouseleave = "chartInfo = ''">-->
                        <!--<img src = "/trend-new-BI/assets/img/charts/waterfall.png" class = "w30" alt = "">-->
                        <!--<br>-->
                        <!--<span>瀑布图</span>-->
                        <!--</b>-->
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('area')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/area.png" class = "w30" alt = "">
                            <br>
                            <span>区域图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('bubble')" ng-mouseover = "getChartInfo('一个多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/bubble.png" class = "w30" alt = "">
                            <br>
                            <span>气泡图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('scatter')" ng-mouseover = "getChartInfo('一个多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/scatter.png" class = "w30" alt = "">
                            <br>
                            <span>散点图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('radar')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "info = ''">
                            <img src = "/trend-new-BI/assets/img/charts/radar.png" class = "w30" alt = "">
                            <br>
                            <span>雷达图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('funnel')" ng-mouseover = "getChartInfo('一个多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/funnel.png" class = "w30" alt = "">
                            <br>
                            <span>漏斗图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('histogram')" ng-mouseover = "getChartInfo('一个多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/histogram.png" class = "w30" alt = "">
                            <br>
                            <span>直方图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('treemap')" ng-mouseover = "getChartInfo('允许一个维度,一个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/treemap.png" class = "w30" alt = "">
                            <br>
                            <span>面积图</span>
                        </b>
                        <!--<b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('dashboard')" ng-mouseover = "getChartInfo('允许一个维度,一个度量')" ng-mouseleave = "chartInfo = ''">-->
                        <!--<img src = "/trend-new-BI/assets/img/charts/dashboard.png" class = "w30" alt = "">-->
                        <!--<br>-->
                        <!--<span>仪表盘</span>-->
                        <!--</b>-->
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('provinceMap')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/provinceMap.png" class = "w30" alt = "">
                            <br>
                            <span>省份地图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('cityMap')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/cityMap.png" class = "w30" alt = "">
                            <br>
                            <span>城市地图</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('heatmap')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/heatMap.png" class = "w30" alt = "">
                            <br>
                            <span>热力图</span>
                        </b>
                        <!-- <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addChart('heatmarketmap')" ng-mouseover = "getChartInfo('允许多个维度,多个度量')" ng-mouseleave = "chartInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/cityMap.png" class = "w30" alt = "">
                            <br>
                            <span>热力图2</span>
                        </b> -->
                    </section>
                </div>
                <div class = "mt5 clearfix pt20" style = "border-top:1px solid #ccc;">
                    <section class = "clearfix">
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addSheet('summarytab')" ng-mouseover = "getSheetInfo('允许多个维度,多个度量')" ng-mouseleave = "sheetInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/summarytab.png" class = "w30" alt = "">
                            <br>
                            <span>汇总表</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addSheet('crosstab')" ng-mouseover = "getSheetInfo('允许多个行表头,多个列表头,一个汇总')" ng-mouseleave = "sheetInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/crosstab.png" class = "w30" alt = "">
                            <br>
                            <span>交叉表</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addSheet('detailtab')" ng-mouseover = "getSheetInfo('允许多个维度和度量')" ng-mouseleave = "sheetInfo = ''">
                            <img src = "/trend-new-BI/assets/img/charts/detailtab.png" class = "w30" alt = "">
                            <br>
                            <span>明细表</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addSheet('retentionrate')" ng-mouseover = "getSheetInfo('')" ng-mouseleave = "sheetInfo = '允许一个日期一个用户标志'">
                            <img src = "/trend-new-BI/assets/img/charts/detailtab.png" class = "w30" alt = "">
                            <br>
                            <span>留存率</span>
                        </b>
                    </section>
                    <!--<footer class = "tc" style = "height:20px;line-height: 20px;">-->
                    <!--{{sheetInfo}}-->
                    <!--</footer>-->
                </div>
                <div class = "mt5 clearfix pt20" style = "border-top:1px solid #ccc;">
                    <section class = "clearfix">
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addCondition('checkbox')">
                            <img src = "/trend-new-BI/assets/img/charts/checkbox.png" class = "w30" alt = "">
                            <br>
                            <span>多选框</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addCondition('radio')">
                            <img src = "/trend-new-BI/assets/img/charts/radio.png" class = "w30" alt = "">
                            <br>
                            <span>单选框</span>
                        </b>
                        <!--<b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addCondition('select')" ng-mouseover = "getCondInfo('只允许一个维度')" ng-mouseleave = "condInfo = ''">
                            <img src = "/trend-new-BI/assets/img/select.png" class = "w30" alt = "">
                            <br>
                            <span>下拉</span>
                        </b>-->
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addCondition('between')">
                            <img src = "/trend-new-BI/assets/img/charts/between.png" class = "w30" alt = "">
                            <br>
                            <span>阈值</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addCondition('date')">
                            <img src = "/trend-new-BI/assets/img/charts/date.png" class = "w30" alt = "">
                            <br>
                            <span>日期</span>
                        </b>
                        <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "addObject('text')">
                            <img src = "/trend-new-BI/assets/img/charts/textBox.png" class = "w30" alt = "">
                            <br>
                            <span>文本框</span>
                        </b>
                        <!-- <b class = "fl tc mb15 cp" style = "width:33.33%;" ng-click = "">
                            <img src = "/trend-new-BI/assets/img/charts/image.png" class = "w30" alt = "">
                            <br>
                            <span>图片</span>
                        </b> -->
                    </section>
                    <!--<footer class = "tc" style = "height:20px;line-height: 20px;">
                        {{condInfo}}
                    </footer>-->
                </div>
            </div>
            
        </div>
    </div>
</div>